<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2012-1-12
  Time: 12:31:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/inc/taglibs.jsp"%>
<link href="${path}/css/ztree/zTreeStyle.css"  rel="stylesheet" type="text/css">

<div class="content_wrap" layoutH="1px">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>

<script type="text/javascript" src="${path}/js/ztree/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript" src="${path}/js/ztree/jquery.ztree.exedit-3.0.js"></script>
<script type="text/javascript">

       /**
        *参数.
        */
       var setting = {
			async: {
				enable: true,
				url:"${path}/admin/area/nodes.json",
				autoParam:["id", "name=n", "level=lv"],
				otherParam:{"otherParam":"zTreeAsyncTest"}
				//dataFilter: filter
			},
            view: {expandSpeed:"",
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
            edit: {
				enable:true
			},
            callback:{
                beforeRename:beforeRename,
                beforeRemove:beforeRemove
            }
		};

       /**
        * 添加节点.
        */
        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if ($("#addBtn_"+treeNode.id).length>0) return;
			var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id
				+ "' title='添加地区' onfocus='this.blur();'></button>";
			sObj.append(addStr);
			var btn = $("#addBtn_"+treeNode.id);
            var areaname = "新地区"+(newCount++);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                $.post(
                        '${path}/admin/area/add.json',{name:areaname,pid:treeNode.id},
                        function(json){
                            if (json&&json=="0"){
                                zTree.reAsyncChildNodes(treeNode, "refresh");
                            }
                        }
                );
				zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:areaname});
                var node = zTree.getNodeByParam("name", areaname, null);
                
                zTree.selectNode(node);
			});
		};
       /**
        * 手势离开.
        *
        * @param treeId
        * @param treeNode
        */
        function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.id).unbind().remove();
		};

       /**
        * 用于捕获节点编辑名称结束(Input 失去焦点 或 按下 Enter 键)之后
        * @param treeId
        * @param treeNode
        * @param newName
        */
        function beforeRename(treeId, treeNode, newName){
            var startName = treeNode.name;
            var zTree = $.fn.zTree.getZTreeObj(treeId);
            $.post('${path}/admin/area/update.json', { id: treeNode.id,name:newName}, function (json) {
                if (json&&json=="0") {
                    zTree.updateNode(treeNode);
                } else {
                    treeNode.name = startName;
                    zTree.updateNode(treeNode);
                    alert("修改名称出错");
                }
            });
        }

       /**
        * 节点删除前回调.
        *
        * @param treeId
        * @param treeNode
        */
        function beforeRemove(treeId,treeNode){
           var zTree = $.fn.zTree.getZTreeObj(treeId);
           if(confirm("确认删除 " + treeNode.name + "吗？")){
               $.post('${path}/admin/area/del.json',{id:treeNode.id},function(json){
                    if(json && json=="0"){
                        var zTree = $.fn.zTree.getZTreeObj(treeId);
                        zTree.reAsyncChildNodes(treeNode, "refresh");
                    }
               });
           }
        }

       /**
        *
        */
        $(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting);
		});
</script>
<style type="text/css">
.ztree li button.add {margin-left:2px; margin-right: -1px; background-position:-112px 0; vertical-align:top; *vertical-align:middle}
</style>